<template>
  <div class="wrapper">
    <Main>
      <div class="main-header">
        <div class="wrap-box">
          <Input v-model="searchText" style="width: 200px" placeholder="输入关键字搜索" />
          <Button class="ml-2" @click="request(searchText)" icon="ios-search">搜索</Button>
          <Button class="ml-2" @click="emptyClick" type="dashed">清空</Button>
        </div>
      </div>
      <div class="main-table">
        <div class="tab-nav tab-border">
          <div class="l-box">
            <b>文章列表</b>
          </div>
          <div class="r-box">
            <Button type="primary" @click="create">新建文章</Button>
          </div>
        </div>
        <div class="tab-wrapper">
          <Table border :columns="columns1" :data="data1"></Table>
        </div>
        <div class="tab-page tab-border">
          <Page :total="page1.total" :pageSize="page1.size" @on-change="page1Change"  @on-page-size-change="page1SizeChange" :page-size-opts="[10, 15, 30, 50]" show-total show-elevator show-sizer />
        </div>
      </div>
    </Main>
  </div>
</template>

<style scoped lang="sass">
  @import "../styles/main.sass"
</style>

<script>
import { Input, Button, Table, Page } from 'view-design'
// @ is an alias to /src
import Main from '@/components/Main.vue'
import utils from '../utils'

import posts from '../service/posts'

export default {
  components: { Main, Input, Button, Table, Page },
  data () {
    return {
      searchText: '',
      page1: {
        total: 0,
        page: 0,
        size: 15,
        load: 0
      },
      columns1: [
        { type: 'index', width: 60, align: 'center' },
        { title: '标题', key: 'title' },
        { title: '摘要', key: 'brief', ellipsis: true }, {
          title: '分类',
          render: (h, params) => {
            return h('span', params.row.category.category)
          }
        }, {
          title: '状态',
          render: (h, params) => {
            const state = params.row.state === 0 ? '未发布' : '已发布'
            return h('span', state)
          }
        }, {
          title: '创建时间',
          key: 'createdAt',
          align: 'center',
          render: (h, params) => {
            const val = params.row.createdAt
            if (val) {
              return h('span', utils.formatDate(val) || '')
            } else {
              return h('span', '')
            }
          }
        }, {
          title: '更新时间',
          key: 'updatedAt',
          align: 'center',
          render: (h, params) => {
            const val = params.row.updatedAt
            if (val) {
              return h('span', utils.formatDate(val) || '')
            } else {
              return h('span', '')
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(Button, {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
              h(Button, {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.row)
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data1: [
      ]
    }
  },
  methods: {
    create () {
      // 先创建草稿操作，返回草稿
      posts.create().then((resp) => {
        this.$router.replace('/markdown/' + resp.data.postId)
      }).catch((resp) => {
        this.$Message.error(resp.message)
      })
    },
    edit (row) {
      // 先查找最近的草稿，没有则创建返回草稿
      posts.edit(row.id).then((resp) => {
        this.$router.replace('/markdown/' + resp.data.postId)
      }).catch((resp) => {
        this.$Message.error(resp.message)
      })
    },
    emptyClick () {
      this.searchText = ''
      this.page1 = {
        total: 0,
        page: 0,
        size: 15,
        load: 0
      }
      this.request()
    },
    page1Change (index) {
      this.page1.page = index
      this.request()
    },
    page1SizeChange (size) {
      this.page1.size = size
      this.request()
    },
    request (v) {
      if (v) {
        this.page1 = {
          total: 0,
          page: 0,
          size: 15,
          load: 0
        }
      }
      posts.getAll(1, 15, v).then((resp) => {
        const { total, records } = resp.data
        this.data1 = records
        if (!this.page1.load) {
          this.page1.total = total
        }
      }).catch((error) => {
        this.$Message.error(error.message)
      })
    },
    remove (row) {
      // 删除确认
      this.$Modal.confirm({
        title: '确认删除？',
        content: '<p>删除后你可重新添加</p>',
        onOk: () => {
          posts.remove(row.id).then(() => {
            this.$Message.success('操作成功')
            this.request()
          }).catch((resp) => {
            this.$Message.error(resp.message)
          })
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        }
      })
    }
  },
  created () {
    this.$store.dispatch('active', 'post')
    this.request()
  }
}
</script>
